<template>
	<view class="sqc-box">
		<view style="width: 590rpx;display: flex;justify-content: flex-end;">
			<image src="@/static/images/ic_pop_close.png" class="ic-pop-close" mode="" @click="hide"></image>
		</view>
		<view class="qr-code-box">
			<view class="qcb-title">心理咨询协议书</view>
			<scroll-view scroll-y="true" style="height: 600rpx;margin-top: 30rpx;">
				<view v-for="(item,index) in dataList" :key="index">
					<view class="xy-content" v-if="index==0">甲方：尊敬的用户 {{getUserInfo.nickName}}</view>
					<view class="xy-content" v-else v-html="item.content"></view>
				</view>
			</scroll-view>
			<view :style="{opacity: btnText=='同意'?1:0.3}">
				<public-btn width="350" height="76" marginTop="30" :title="btnText" @click="agree"></public-btn>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "conselor_xieyi",
		data() {
			return {
				dataList: [],
				btnText:'同意'
			};
		},
		created() {
			if (uni.getStorageSync('conselorXieYi')) {
				this.btnText = '已同意';
			}
			let this_ = this;
			uni.request({
				url: this.imgBaseURL + '/conselor_xy.json',
				success(res) {
					this_.dataList = res.data.data;
					console.log(res)
				}
			})
		},
		methods:{
			agree(){
				this.btnText = '已同意';
				uni.setStorageSync('conselorXieYi',true);
				this.hide();
			},
			hide(){
				this.$emit('hide')
			}
		}
	}
</script>

<style scoped>
	.qcb-title{
		width: 100%;
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.xy-content{
		width: 533rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		line-height: 48rpx;
		text-align: justify;
		margin: 0 auto;
	}
	
	.sqc-box {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.ic-pop-close {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 30rpx;
	}

	.qc-title {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.qr-code-box {
		width: 610rpx;
		height: 812rpx;
		background-color: #FFFFFF;
		padding-top: 27rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
	}

	.qc-img {
		width: 328rpx;
		height: 328rpx;
		display: block;
		margin: 0 auto;
		margin-top: 130rpx;
	}

	.qc-tip {
		width: 100%;
		font-size: 28rpx;
		color: #333435;
		margin-top: 34rpx;
		text-align: center;
	}
</style>